<template>
	<view class="wrap">
		<view class="wodelist-wrap">
			<view  @click="enterpage(item)" class="wodelist-item" :class="{'waiting':item.sign=='waiting','completed':item.sign=='completed','review':item.sign=='review'}"  v-for="(item,index) in wodelist" :key="index">
				<view class="left">
					<view>{{item.name}}</view>
					<view style="color:#f81b1e;padding-top:8rpx">{{item.subtitle}}</view>
				</view>
				<view class="right" style="color:#f81b1e">
					{{item.amount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	
	
	export default {
		data() {
			return {
				nowpage:1,
				more:'loading',
				yishoulist:[],
				dxiaoshou:[{id:123}],
				xiaoshou:{
					sales:[]
				},
				wodelist:[],
				wodetype:1,
				nowindex:4,
				nowdata:{},
				tuangou:[]
			}
		},
		
		onShow(){
			this.settimer(null)
			this.getData()
		},
		
		onLoad(options) {
			this.nowdata=JSON.parse(options.data)
			
			
			//this.getData()
		},
		
		methods: {
			...mapMutations(['settimer']),
			
			enterdaixiaoshou(item){
				let data=JSON.stringify(item)
				uni.navigateTo({
				    url: '/pages/daixiaoshouliebiao/index'+`?data=${data}`
				});
			},

			getData(){
				let that=this
				let data={
					id:this.nowdata.id,
					type:this.nowdata.type,
					address_id:this.nowdata.address_id,
				}
				if(this.nowdata.page=='cpdm'){
					that.apipost('/api/order/sell_split_orders',data,true).then(res => {
						if(res.Code==10200){
							let data=res.Data
							that.wodelist=data
							
						}else{
							setTimeout(function(){
								uni.navigateBack({
									delta:1//返回层数，2则上上页
								})
							},1500)
						}
						
					}).catch(err=>{
						console.log(err)
					});
				}else{
					that.apipost('/api/order/stock_split_orders',data,true).then(res => {
						if(res.Code==10200){
							let data=res.Data
							that.wodelist=data
							
						}
						
					}).catch(err=>{
						console.log(err)
					});
				}
				
			},
			enterpage(data){
				if(!data.is_enter){
					return
				}
				data.enter=this.nowdata.page
				data.page='fuyang'
				data.type=1
				data.total_price=Number(data.amount.substring(1,90))
				let pageDatastr=JSON.stringify(data)
				uni.navigateTo({
				    url: `/pages/money/pay?data=`+pageDatastr
				});
				
			}
		}
		
	}
</script>

<style>
	.reservation:after{
		content:'';
		display:block;
		width:320rpx;
		height:320rpx;
		position:absolute;
		right:0;
		top:0;
		background:url(/static/yudingzhong.png) right 0 no-repeat;
		background-size:auto 55%;
	}
	.wodelist-item{
		border-radius:18rpx;
		font-size:34rpx;
		display:flex;
		align-items: center;
		justify-content: space-between;
		width:704rpx;
		height:144rpx;
		background:#fff;
		margin:0 auto;
		margin-bottom:26rpx;
		box-sizing: border-box;
		padding:22rpx 22rpx 22rpx 22rpx;
	}
	.shouchuzhong{
		background:url(/static/shouchuzhong.png) right 0 no-repeat #fff;
		background-size:auto 55%;
	}
	.on_sell{
		background:url(/static/xiaoshouzhong.png) right 0 no-repeat #fff;
		background-size:auto 55%;
	}
	.xiaoshou .list-wrap .list-item{
		font-size:34rpx;
		background:#fff;
		height:166rpx;
		box-sizing: border-box;
		margin-bottom:24rpx;
		padding:44rpx 28rpx 18rpx 28rpx;
		border-radius:18rpx;
	}
	.xiaoshou .list-wrap .xiaoshouzhong{
		background:url(/static/xiaoshouzhong.png) no-repeat right 0 #fff;
		background-size:auto 60%;
	}
	.xiaoshou .list-wrap{
		margin:0 auto;
		
		
		width:710rpx;
		
		
	}
	.card-xiaoshou{
		margin:0 auto;
		margin-bottom:30rpx;
	}
	.list-wrap .info{
		justify-content: space-between;
		display:flex;
	}
	.card-xiaoshou .dai{
		border-radius:20rpx;
		color:#fc5553;
		font-size:40rpx;
		font-weight:bold;
		background:#f8bfb4;
		padding-top:36rpx;
		text-align: center;
		box-sizing: border-box;
		width:344rpx;
		height:244rpx;
	}
	.card-xiaoshou .yi{
		border-radius:20rpx;
		color:#fc5553;
		font-size:40rpx;
		font-weight:bold;
		background:#fee19d;
		padding-top:36rpx;
		text-align: center;
		box-sizing: border-box;
		width:344rpx;
		height:244rpx;
	}
	.card-xiaoshou{
		display:flex;
		justify-content: space-between;
		width:710rpx;
	}
	.xiaoshou .active:after{
		content:'';
		height:1rpx;
		background:#fff;
		width:70rpx;
		position:absolute;
		top:62rpx;
	}
	.xiaoshou .title .list-nav{
		width:50%;
		position:relative;
		display:flex;
		align-items: center;
		justify-content: center;
		color:#fff;
	}
	.xiaoshou .title{
		margin-bottom:34rpx;
		display:flex;
		justify-content: space-between;
		height:84rpx;
		background:linear-gradient(to right,#ff5452,#ff7946)
	}
	.tuangou-desc .price{
		position:relative;
		
		color:#f24905;
	}
	.tuangou-desc{
		justify-content: space-between;
		height:114rpx;
		align-items: center;
		display:flex;
		border-bottom-left-radius: 22rpx;
		border-bottom-right-radius: 22rpx;
		background:#fff;
		padding:16rpx 30rpx 0 30rpx;
	}
	.tuangou-item{
		
		font-size:38rpx;
		margin-bottom:32rpx;
		border-radius:22rpx;
	}
	.tuangou{
		width:720rpx;
		margin:0 auto;
	}
	.tuangou .img-wrap{
		position:relative;
		width:100%;
		height:280rpx;
		border-top-left-radius: 22rpx;
	}
	
	.tuangou .img-wrap uni-image{
		border-top-right-radius: 22rpx;
		border-top-left-radius: 22rpx;
	}
	
	.no-data{
		background:#fff;
		display:flex;
		align-items: center;
		height:94rpx;
		justify-content: center;
		color:#909090;
	}
	.mingxi-wrap{
		color:#828282;
		width:702rpx;
		margin:0 auto;
		margin-bottom:38rpx;
		height:98rpx;
		
		background-size:18rpx;
		padding-left:32rpx;
		display:flex;
		align-items: center;
	}
	.info-wrap .title{
		border-bottom:1rpx solid #fff;
		height:50%;
		display:flex;
		align-items: center;
		justify-content: center;
		color:#fff;
	}
	.info-wrap .num{
		display:flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		height:50%
	}
	.info-wrap{
		border-radius: 10rpx;
		padding:0 32rpx;
		box-sizing: border-box;
		width:710rpx;
		height:180rpx;
		background: linear-gradient(to bottom,#89b3ed,#4b8be2);
		margin:0 auto;
		margin-top:30rpx;
	}
	.active{
		color:#006ffd;
		
	}
	.menu{
		background:#fff;
		margin-bottom:30rpx;
		padding:20rpx 0;
		border-bottom:2rpx solid #dfdfdf;
	}
	.tab-change{
		width:100%;
		overflow-x: auto;
		overflow-y: hidden;
		height:48rpx;
		align-items: center;
		
		display:flex;
		justify-content: space-around;
		
	}
	.tab-change .tab-item{
		font-size:34rpx;
		box-sizing: border-box;
		height:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		width:200rpx;
		color:#827e7f;
		text-align: center;
		position:relative;
	}
	
	.tab-change .active{
		color:#f74169;
	}
	.tab-change .active:after{
		content:'';
		display:block;
		width:40rpx;
		height:2rpx;
		position:absolute;
		top:44rpx;
		background:#f74169;
		
	}
	page{
		background:#f7f7f7;
	}
	.waiting{
		background:url(/static/waiting.png) right 0 no-repeat #fff;
		background-size:auto 55%;
	}
	.completed{
		background:url(/static/yiwancheng.png) right 0 no-repeat #fff;
		background-size:auto 55%;
	}
	.review{
		background:url(/static/checking.png) right 0 no-repeat #fff;
		background-size:auto 55%;
	}
</style>
